<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>47-font-styles</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="text-italic">Esto es un párrafo en itálica.</p>
    <p class="text-bold">Esto es un párrafo en negritas.</p>
    <p class="text-medium">Esto es un párrafo en negritas medias.</p>

    <p class="text-left">Esto es un párrafo alineado a la izquierda.</p>
    <p class="text-center">Esto es un párrafo centrado.</p>
    <p class="text-right">Esto es un párrafo alineado a la derecha.</p>
    <p class="text-justify">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia temporibus nobis, ullam doloremque inventore, accusamus repellendus fugit pariatur ex eos commodi repudiandae numquam minima accusantium recusandae dolor? Accusamus, dignissimos quos!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia temporibus nobis, ullam doloremque inventore, accusamus repellendus fugit pariatur ex eos commodi repudiandae numquam minima accusantium recusandae dolor? Accusamus, dignissimos quos!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia temporibus nobis, ullam doloremque inventore, accusamus repellendus fugit pariatur ex eos commodi repudiandae numquam minima accusantium recusandae dolor? Accusamus, dignissimos quos!
    </p>

    <p class="text-line-height">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia temporibus nobis, ullam doloremque inventore, accusamus repellendus fugit pariatur ex eos commodi repudiandae numquam minima accusantium recusandae dolor? Accusamus, dignissimos quos!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia temporibus nobis, ullam doloremque inventore, accusamus repellendus fugit pariatur ex eos commodi repudiandae numquam minima accusantium recusandae dolor? Accusamus, dignissimos quos!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia temporibus nobis, ullam doloremque inventore, accusamus repellendus fugit pariatur ex eos commodi repudiandae numquam minima accusantium recusandae dolor? Accusamus, dignissimos quos!
    </p>

    <p class="text-uppercase">Esto es un párrafo en mayúsculas.</p>
    <p class="text-lowercase">Esto es un párrafo en minúsculas.</p>
    <p class="text-capitalize">Esto es un párrafo capitalizado.</p>

    <p class="text-underline">Esto es un párrafo subrayado.</p>
    <p class="text-line-through">Esto es un párrafo tachado.</p>

    <p class="text-letter-spacing">Esto es un párrafo con espaciado entre letras.</p>
    <p class="text-word-spacing">Esto es un párrafo con espaciado entre palabras.</p>
</body>
</html>
